<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>输入框组</title>
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <form class="bs-example bs-example-form" role="form">

        <div class="input-group input-group-lg">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" placeholder="twitterhandle">
        </div><br>

        <div class="input-group">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" placeholder="twitterhandle">
        </div><br>

        <div class="input-group input-group-sm">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" placeholder="twitterhandle">
        </div><br>

        <div class="input-group input-group-sm">
            <span class="input-group-addon">
                <input type="checkbox">
            </span>
        <input type="text" class="form-control" placeholder="twitterhandle">
    </div><br>

        <div class="input-group input-group-sm">
            <span class="input-group-addon">
                <input type="radio">
            </span>
            <input type="text" class="form-control" placeholder="twitterhandle">
        </div><br>

        <div class="input-group input-group-sm">
            <span class="input-group-btn">
                <button class="btn btn-primary" type="button">GO!</button>
            </span>
            <input type="text" class="form-control" placeholder="twitterhandle">
        </div><br>

        <div class="input-group input-group-sm">
        <div class="input-group-btn">
            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button">下拉菜单 <span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="#">功能1</a></li>
                <li><a href="#">功能2</a></li>
                <li><a href="#">功能3</a></li>
            </ul>
        </div>
        <input type="text" class="form-control" placeholder="twitterhandle">
    </div><br>

        <div class="input-group input-group-sm">
            <div class="input-group-btn">
                <button class="btn btn-default" type="button">下拉菜单 </button>
                <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button" tabindex="-1"><span class="caret"></span><span class="sr-only">切换下拉菜单</span></button>
                <ul class="dropdown-menu">
                    <li><a href="#">功能1</a></li>
                    <li><a href="#">功能2</a></li>
                    <li class="divider"></li>
                    <li><a href="#">功能3</a></li>
                </ul>
            </div>
            <input type="text" class="form-control" placeholder="twitterhandle">
        </div><br>
    </form>
</div>


<script src="jquery-3.2.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>